<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/configure' }">配置信息</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="choice-page">
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.index!='1' && item.type == '1'" v-model="item.ivalue"
						:placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type=='1'&& item.name == '设备名称'" class="rounded-input"
						@blur="blurClick()" @focus="focusClick(item)" :placeholder="item.placeholder" />
					<el-date-picker v-if="item.index=='4'" v-model="item.ivalue" type="date"
						:placeholder="item.placeholder" style="width: 160px;" :suffix-icon="CaretBottom" />
				</div>
				<view class="choice-box">
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</view>
			</div>
			<div class="use">
				<el-button round color="#0071bb">修改补货员</el-button>
				<el-button round :icon="Refresh">刷新</el-button>
				<el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" v-model="whole" />
					<el-table-column prop="id" label="序号" />
					<el-table-column prop="name" label="设备名称"/>
					<el-table-column prop="imei" label="设备IMEI号" />
					<el-table-column prop="identifier" label="生产编号" />
					<el-table-column prop="field" label="场地" />
					<el-table-column prop="address" label="地址" />
					<el-table-column prop="price" label="商品价格策略" />
					<el-table-column prop="fictitious" label="虚拟货架策略" />
					<el-table-column prop="refund" label="自动退款策略" />
					<el-table-column prop="police" label="报警策略" />
					<el-table-column prop="out_stock" label="库存缺货阈值" />
					<el-table-column prop="break_stock" label="库存断货阈值" />
					<el-table-column prop="personnel" label="补货员" />
					<el-table-column prop="operate" label="操作" />
				</el-table>
			</div>
			<!-- 底部分页 -->
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"  :size="size"
					:disabled="disabled"  layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { CaretBottom, Search, RefreshLeft, Refresh, HelpFilled } from '@element-plus/icons-vue'
	import type { ComponentSize } from 'element-plus'
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const whole = ref(false)
	const choiceIndex = ref("");
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)
	const tableData = [
		{
			id: '1',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			identifier: 'LHY2542541',
			field: '场地1',
			address: '常熟市琴川街道琴湖广场',
			price: '模版1',
			fictitious: '模版2',
			refund: '策略1',
			police: '策略2',
			out_stock: '52',
			break_stock: '运营中',
			personnel: '小郑',
			operate: '操作1',
		},
		{
			id: '2',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			identifier: 'LHY2542541',
			field: '场地1',
			address: '常熟市琴川街道琴湖广场',
			price: '模版1',
			fictitious: '模版2',
			refund: '策略1',
			police: '策略2',
			out_stock: '52',
			break_stock: '运营中',
			personnel: '小郑',
			operate: '操作1',
		},
		{
			id: '3',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			identifier: 'LHY2542541',
			field: '场地1',
			address: '常熟市琴川街道琴湖广场',
			price: '模版1',
			fictitious: '模版2',
			refund: '策略1',
			police: '策略2',
			out_stock: '52',
			break_stock: '运营中',
			personnel: '小郑',
			operate: '操作1',
		}
	]
	const searchList = ref<searchList[]>([
		{
			name: '设备名称',
			index: '1',
			placeholder: '请输入',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备IMEI',
			index: '2',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '生产编号',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '激活日期',
			index: '4',
			placeholder: '请选择激活日期',
			type: '2',
			ivalue: ''
		},
		{
			name: '在线状态',
			index: '5',
			placeholder: '请选择状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '通电状态',
			index: '6',
			placeholder: '请选择状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '线路',
			index: '7',
			placeholder: '请选择线路',
			type: '1',
			ivalue: ''
		},
		{
			name: '区域',
			index: '8',
			placeholder: '请选择区域',
			type: '1',
			ivalue: ''
		},
		{
			name: '商圈',
			index: '9',
			placeholder: '先选择区域，再选商圈',
			type: '1',
			ivalue: ''
		},
		{
			name: '场景策略',
			index: '10',
			placeholder: '请选择场景策略',
			type: '1',
			ivalue: ''
		},
		{
			name: '补货员',
			index: '11',
			placeholder: '请选择补货员',
			type: '1',
			ivalue: ''
		},
		{
			name: '运营状态',
			index: '12',
			placeholder: '请选择状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备类型',
			index: '13',
			placeholder: '请选择类型',
			type: '1',
			ivalue: ''
		},
		{
			name: '报警状态',
			index: '14',
			placeholder: '请选择状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '报警策略',
			index: '14',
			placeholder: '请选择报警策略',
			type: '1',
			ivalue: ''
		},
		{
			name: '场地',
			index: '15',
			placeholder: '请选择场地',
			type: '1',
			ivalue: ''
		},
		{
			name: '虚拟货架策略',
			index: '16',
			placeholder: '请选择状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '自动退款策略',
			index: '17',
			placeholder: '请选择自动退款策略',
			type: '1',
			ivalue: ''
		},
	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const focusClick = (searchItem : searchList) => {
		choiceIndex.value = searchItem.index
	};
	const blurClick = () => {
		choiceIndex.value = ''
	};
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
</script>
<style lang="scss" scoped>
	.choice-page {
		background-color: #fff;
		margin-top: 20px;
		padding: 10px 10px 0px 10px;
	}

	.choice-list {
		display: flex;
		flex-wrap: wrap;

		.choice-item {
			width: 14.2%;
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.el-select {
				width: 160px;
			}

			.choice-title {
				font-size: 12px;
				width: 80px;
				text-align: center;
			}

			.rounded-input {
				width: 160px;
			}
		}

		.choice-box {
			width: 42.5%;
			display: flex;
			justify-content: right;

			.choice-btn {
				display: flex;
				justify-content: left;
			}
		}
	}

	.use {
		padding-left: 10px;
	}

	.page_number {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px 0;
	}

	.tables {
		margin-top: 10px;
	}
</style>